<template>
    <div class="chat-container">
        <div class="cyber-background"></div>

        <div class="chat-box" ref="chatBox">
            <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.from]">
                <div class="message-content">
                    <div class="message-bubble">
                        <p>{{ msg.text }}</p>
                    </div>
                    <div class="message-time">{{ formatTime(msg.time) }}</div> <!-- 传递时间参数 -->
                </div>
            </div>
        </div>

        <div class="input-area">
            <div class="input-wrapper">
                <input v-model="userInput" type="text" placeholder="向Ace AI提问..." @keyup.enter="sendMessage"
                    class="neon-input" :disabled="isLoading" />
                <button @click="sendMessage" class="neon-button" :disabled="isLoading">
                    <span class="send-text">{{ isLoading ? '生成中...' : '发送' }}</span>
                    <div class="neon-effect"></div>
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userInput: '',
            messages: [
                // 初始欢迎消息
                { text: '你好，我是Ace AI 1.5 flash mini，拥有更强大的思考能力，有什么需要帮助的吗?', from: 'ai', time: new Date() },
            ],
            isLoading: false,
            tempMessageIndex: null // 新增临时消息索引
        };
    },
    methods: {
        // 格式化时间方法
        formatTime(time) {
            if (!time) return '';
            const date = new Date(time);
            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        },

        sendMessage() {
            if (!this.userInput.trim() || this.isLoading) return;

            // 添加用户消息
            const userMessage = {
                text: this.userInput,
                from: 'user',
                time: new Date() // 添加时间戳
            };
            this.messages.push(userMessage);

            const question = this.userInput;
            this.userInput = '';
            this.isLoading = true;

            // 添加思考中提示
            const thinkingMessage = {
                text: 'Ace AI正在深度思考中...',
                from: 'ai',
                time: new Date(),
                tempId: Date.now() // 使用时间戳作为唯一标识
            };

            this.messages.push(thinkingMessage);
            this.tempMessageId = thinkingMessage.tempId;

            // 调用后端API
            this.$axios.post('/api/chat/question', { question: question })
                .then(response => {
                    this.removeTempMessage();

                    if (response.data.code == 200) {
                        // 添加AI回复
                        const aiMessage = {
                            text: response.data.data,
                            from: 'ai',
                            time: new Date() // 添加时间戳
                        };
                        this.messages.push(aiMessage);
                    } else {
                        this.$message.error('请求失败: ' + response.data.msg);
                    }
                })
                .catch(error => {
                    // 移除临时消息
                    this.removeTempMessage();
                    console.error("API请求失败", error);
                    this.$message.error('服务暂时不可用');
                })
                .finally(() => {
                    this.isLoading = false;
                    this.scrollToBottom();
                });
        },

        // 新增辅助方法（保持代码整洁）
        removeTempMessage() {
            if (this.tempMessageId) {
                this.messages = this.messages.filter(
                    msg => msg.tempId !== this.tempMessageId
                );
                this.tempMessageId = null;
            }
        },

        pushErrorMessage() {
            this.messages.push({
                text: '当前服务不可用，请稍后再试',
                from: 'ai',
                time: new Date()
            });
        },

        scrollToBottom() {
            this.$nextTick(() => {
                this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
            });
        }
    }
};
</script>

<!-- 打印需要，做成黑白样式 -->

<style scoped>
/* 基础容器 */
.chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    height: 90vh;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* 背景纹理 */
.cyber-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg,
            transparent,
            transparent 15px,
            rgba(0, 0, 0, 0.03) 15px,
            rgba(0, 0, 0, 0.03) 16px);
    opacity: 0.4;
    z-index: 0;
}

/* 消息区域 */
.chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    position: relative;
    z-index: 1;
}

/* 消息通用样式 */
.message {
    display: flex;
    margin: 16px 0;
    transition: all 0.3s ease;
}

.message.user {
    justify-content: flex-end;
}

.message.ai {
    justify-content: flex-start;
}

/* 消息气泡 */
.message-bubble {
    max-width: 75%;
    padding: 14px 20px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 15px;
    position: relative;
    transition: transform 0.2s ease;
}

.message.user .message-bubble {
    background: #2d2d2d;
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}

.message.ai .message-bubble {
    background: #f8f9fa;
    color: #2d2d2d;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid #eee;
}

/* 消息时间 */
.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    padding: 0 12px;
}

/* 输入区域 */
.input-area {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    position: relative;
    z-index: 2;
}

.input-wrapper {
    display: flex;
    gap: 12px;
}

/* 输入框样式 */
.neon-input {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    background: #fff;
    color: #333;
    font-size: 15px;
    transition: all 0.2s ease;
}

.neon-input:focus {
    outline: none;
    border-color: #666;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* 按钮样式 */
.neon-button {
    padding: 12px 28px;
    border: none;
    border-radius: 25px;
    background: #2d2d2d;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neon-button:hover {
    background: #404040;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.neon-button:active {
    transform: scale(0.98);
}

/* 禁用状态 */
.neon-input:disabled,
.neon-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 动画效果 */
@keyframes messageAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message {
    animation: messageAppear 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 滚动条样式 */
.chat-box::-webkit-scrollbar {
    width: 6px;
}

.chat-box::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.chat-box::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* 加载状态提示 */
.send-text {
    position: relative;
    z-index: 1;
}
</style>